@spacing: 32px;
@borderRadius: 3px;

.prime-document {
  padding: @spacing;
  padding-bottom: 128px;

  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;

  .ant-tabs.ant-tabs-card {

    overflow: visible;

    > .ant-tabs-content {
      margin-top: -18px;

      > .ant-tabs-tabpane {
        background: #fff;
        padding: @spacing;
        border-radius: @borderRadius;
      }
    }

    > .ant-tabs-bar {
      border-color: transparent;

      .ant-tabs-tab {
        border-color: transparent;
        background: transparent;
      }

      .ant-tabs-tab-active {
        border-color: #fff;
        background: #fff;
      }
    }
  }

  .ant-tabs-tabpane > .ant-form-item:last-child {
    margin-bottom: 0;
  }

  .ant-form-item {
    border-left: 3px solid #f8f8f8;
    padding-left: 16px;
    transition: border-left-color ease-in-out 0.33s;

    &:focus-within {
      border-left-color: #e5e5e5;
    }
  }

  .ant-form-item,
  .ant-form-item-with-help {
    margin-bottom: @spacing;
  }

  .ant-form-item-label {
    line-height: normal;
    margin-bottom: 4px;
    margin-top: -4px;

    label {
      opacity: 0.35;
      font-family: "Noto Sans SC", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      font-weight: 400;
      font-size: 13px;

      &:after {
        display: none;
      }
    }
  }

  .ant-form-item-control {
    line-height: normal;

    .ant-form-explain {
      margin-top: 8px;
      font-size: 12px;
    }
  }

  .ant-input {
    border-width: 0;
    outline: none;
    border-radius: 0px;

    margin-left: 0;
    margin-bottom: 0;
    padding: 0;

    &:focus, &:hover {
      border: none !important;
      box-shadow: none !important;
    }
  }

  .ant-input,
  .ant-cascader-picker-label,
  .ant-time-picker-input {
    font-size: 16px;
    font-family: "Noto Sans SC", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 300;
  }

  .ant-input-lg {
    height: auto;
  }

  .bf-content {
    height: auto !important;
    padding-bottom: 0;
  }

  .bf-container .public-DraftEditor-content > div {
    padding-bottom: 0;
  }

  .bf-controlbar {
    padding: 0;
    margin-bottom: 8px;
    box-shadow: inset 0 -1px 0 0 rgba(0,0,0,.075);

    position: sticky;
    top: 0;
    background: white;
    z-index: 7;
  }

  .bf-container .public-DraftEditor-content {
    padding: 0;
  }

  .ant-calendar-picker-input,
  .ant-time-picker-input {
    border: none;
    box-shadow: 0 1px 7px rgba(0,0,0,0.075) !important;
    padding: 8px;
    border-radius: 5px;

    &:focus,
    &:hover {
      box-shadow: 0 1px 7px rgba(0,0,0,0.075) !important;
    }
  }

  .ant-select {
    margin-top: 8px;
  }

  .ant-select-selection {
    border: none;
    box-shadow: 0 1px 7px rgba(0,0,0,0.075) !important;
    border-radius: 5px;
    min-height: 40px;
    padding: 4px 8px;

    &:focus,
    &:hover {
      box-shadow: 0 1px 7px rgba(0,0,0,0.075) !important;
    }
  }

  .ant-calendar-picker,
  .ant-time-picker {
    margin-top: 8px;
    min-width: 150px;
  }

  .ant-cascader-input {
    padding: 8px;
    border: none !important;
    box-shadow: none !important;
  }

  .ant-cascader-picker-label {
    padding-left: 0px;
  }

  .prime-slice {
    margin: -@spacing;
    margin-bottom: 16px;
    background-color: #f0f2f5;

    > .ant-form-item-label {
      margin-bottom: 8px;
    }
  }

  .prime-slice-spacer-top {
    height: @borderRadius;
    width: 100%;
    background-color: white;
    border-bottom-left-radius: @borderRadius;
    border-bottom-right-radius: @borderRadius;

    padding-top: @spacing;
    margin-bottom: @spacing;
  }

  .prime-slice-spacer-bottom {
    height: @borderRadius;
    width: 100%;
    background-color: white;
    border-top-left-radius: @borderRadius;
    border-top-right-radius: @borderRadius;

    margin-top: @spacing;
  }

  .prime-slice:nth-last-child(2) {
    margin-bottom: -@spacing;

    .prime-slice-spacer-bottom {
      display: none;
    }
  }

  .prime-slice-item {
    margin-bottom: 16px;
    border: none;
    border-radius: @borderRadius;

    .ant-card-body {
      padding: @spacing;
      padding-bottom: 0;
    }
  }

  .prime-slice-item-actions {
    position: absolute;
    top: 0;
    right: 0;

    z-index: 10;

    flex-direction: row;
  }

  .prime-slice-add {
    border: none !important;
    box-shadow: none;

    &:hover {
      box-shadow: 0 2px 1px rgba(0, 0, 0, 0.025);
    }
  }

  .prime-slice-item-button {
    padding: 12px 12px;
    cursor: pointer;
    transition: background-color ease-in-out 0.33s;

    &.disabled {
      color: #eee;
      cursor: default;

      &:hover {
        background-color: transparent;
      }
    }

    &:hover {
      background-color: #f8f8f8;
    }

    &:last-child {
      border-top-right-radius: @borderRadius;
    }
  }

  .prime-group {
    border-left: 0;
    margin-left: -@spacing;
    margin-right: -@spacing;
    background-color: #f8f8f8;
    padding-top: @spacing;
    padding-right: @spacing;
    padding-bottom: @spacing;

    > .ant-form-item-label {
      margin-bottom: 8px;
    }
  }

  .prime-group:nth-last-child(2) {
    margin-bottom: -(@spacing * 2);
  }

  .prime-group-item {
    position: relative;
    border: none;
    padding: 0;
    margin: 0;
    margin-bottom: 16px;
    border-radius: @borderRadius;

    > .ant-card-body {
      padding: 16px;
      padding-bottom: 0;
      padding-top: @spacing;
    }
  }

  .prime-slice .prime-group {
    margin-left: -@spacing;
    margin-right: -@spacing;
    padding-right: @spacing;
    padding-bottom: @spacing;
    margin-bottom: 0;
    padding-left: @spacing;
  }

  .ant-calendar-picker-clear, .ant-calendar-picker-icon {
    width: 16px;
    height: 16px;
  }
}
